import React, { useEffect, useState } from "react";
import { Select, Button, Table, Modal, message } from "antd";
import { connect } from "dva";
import styles from "./index.less";
import { getChannelText } from "../../../../channelType";

const ChannelsSelect = props => {
  const {
    channelsOfSelected: listOfSelectedChannels,
    onCheck: setlistOfSelectedChannels,
    onClose,
    visible,
    dispatch,
    channelTypeList = []
  } = props;
  const [listOfChannels, setlistOfChannels] = useState([]);
  const [loading, setLoading] = useState(false);
  const [channelType, setchannelType] = useState();
  const [pageNum, setpageNum] = useState(1);
  const [pageSize, setpageSize] = useState(5);
  const [total, settotal] = useState(0);
  window.console.log(channelTypeList);
  useEffect(() => {
    onSearch();
  }, [pageNum, pageSize]);

  // 查询角色
  function onSearch() {
    const params = {
      pageNum,
      pageSize,
      channelType
    };
    setLoading(true);
    dispatch({ type: "channelModel/channelList", payload: params }).then(
      res => {
        if (res.success) {
          setlistOfChannels(res.datas);
          settotal(res.totalCount);
        } else {
          message.error(res.errMsg);
        }
        setLoading(false);
      }
    );
  }
  // 表格页码变化
  const onPageChange = (cur, size) => {
    setpageNum(cur);
    setpageSize(size);
  };
  // 子组织表格column
  const channelColumn = [
    {
      title: "渠道编码",
      dataIndex: "channelCode"
    },
    {
      title: "渠道名称",
      dataIndex: "description"
    },
    {
      title: "渠道类型",
      dataIndex: "channelType",
      render: text => getChannelText(channelTypeList, text)
    }
  ];
  // 表格check配置
  const rowSelection = {
    selectedRowKeys: listOfSelectedChannels.map(o => o.pushChannelId),
    onSelect: (record, selected) => {
      if (selected) {
        setlistOfSelectedChannels(listOfSelectedChannels.concat([record]));
      } else {
        setlistOfSelectedChannels(
          listOfSelectedChannels.filter(
            o => o.pushChannelId !== record.pushChannelId
          )
        );
      }
    },
    onSelectAll: selected => {
      if (selected) {
        // 记录当前表格新增的record
        const newRec = [];
        listOfChannels.forEach(l => {
          if (
            !listOfSelectedChannels.find(ls => ls.pushChannelId === l.pushChannelId)
          ) {
            newRec.push(l);
          }
        });
        setlistOfSelectedChannels(listOfSelectedChannels.concat(newRec));
      } else {
        // 删除已选择数据中心包含当前表格数据的记录
        setlistOfSelectedChannels(
          listOfSelectedChannels.filter(
            o => !listOfChannels.some(l => l.pushChannelId === o.pushChannelId)
          )
        );
      }
    }
  };

  return (
    <Modal
      title="选择消息模板"
      visible={visible}
      onCancel={onClose}
      wrapClassName={styles.modalCls}
      footer={[
        <Button key="ok" type="primary" onClick={onClose}>
          确认
        </Button>
      ]}
    >
      <div className={styles.root}>
        <div className={styles.searchBox}>
          <div className={styles.select}>
            <Select
              placeholder="渠道类型"
              allowClear
              style={{ width: 200 }}
              onChange={value => setchannelType(value)}
            >
              {channelTypeList.map(({ value, des }) => (
                <Select.Option key={`${value}-${des}`} value={value}>
                  {des}
                </Select.Option>
              ))}
            </Select>
          </div>
          <Button
            loading={loading}
            icon="search"
            type="primary"
            onClick={onSearch}
          >
            查询
          </Button>
        </div>
        <div className={styles.menuTable}>
          <Table
            rowKey="pushChannelId"
            columns={channelColumn}
            dataSource={listOfChannels}
            rowSelection={rowSelection}
            pagination={{
              pageSize,
              current: pageNum,
              total,
              onChange: onPageChange
            }}
            loading={loading}
          />
        </div>
      </div>
    </Modal>
  );
};

export default connect(({ channelDictionaryModel }) => ({
  channelTypeList: channelDictionaryModel.channelsTypesData
}))(ChannelsSelect);
